<template>
  <div>
    <el-form-item label="环评情况">
      <el-radio-group v-model="value.reportStatus" :disabled="disabled" @input="handleChange">
        <el-radio v-for="item in dict.type.env_content_status" :key="item.value" :label="item.value">{{ item.label }}</el-radio>
      </el-radio-group>
    </el-form-item>
    <table v-if="value.reportStatus === '有'" class="pars-table" style="width: 1200px">
      <thead>
        <tr>
          <th>项目名称</th>
          <th>报告类型</th>
          <th>批复文号</th>
          <th>批复时间</th>
          <th>是否验收</th>
          <th>验收时间</th>
          <th v-if="!disabled" class="operation">操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="(row, index) in data" :key="row.id">
          <th>
            <el-input v-model="row.projectName" :disabled="disabled" placeholder="请输入项目名称" @change="handleChange" />
          </th>
          <th>
            <el-select v-model="row.reportType" :disabled="disabled" placeholder="请选择" @change="handleChange">
              <el-option
                v-for="dict in dict.type.env_eia_type"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </th>
          <th>
            <el-input v-model="row.officialNo" :disabled="disabled" placeholder="请输入批复文号" @change="handleChange" />
          </th>
          <th>
            <el-date-picker
              v-model="row.officialTime"
              :disabled="disabled"
              type="month"
              format="yyyy年MM月"
              placeholder="选择时间"
              @change="handleChange"
            />
          </th>
          <th>
            <el-select v-model="row.status" :disabled="disabled" placeholder="请选择" @change="handleChange">
              <el-option
                v-for="dict in dict.type.env_system_yes_no"
                :key="dict.value"
                :label="dict.label"
                :value="dict.value"
              />
            </el-select>
          </th>
          <th>
            <el-date-picker
              v-model="row.checkTime"
              :disabled="disabled || row.status !== '是'"
              type="month"
              format="yyyy年MM月"
              placeholder="选择时间"
              @change="handleChange"
            />
          </th>
          <th v-if="!disabled">
            <i class="el-icon-remove icon remove" @click="handleRemove(index)" />
            <i class="el-icon-circle-plus icon add" @click="handleAdd(index)" />
          </th>
        </tr>
      </tbody>
    </table>
  </div>
</template>
<script>
import { parSettingMixin } from '@/utils/mixins'
import { formatDatetime } from '@/utils'

export default {
  name: 'Evaluate',
  mixins: [parSettingMixin],
  dicts: ['env_content_status', 'env_eia_type', 'env_system_yes_no'],
  props: {
    disabled: Boolean,
    value: {
      type: Object,
      default: () => ({})
    }
  },
  data() {
    return {
      data: this.value && this.value.reportItems && this.value.reportItems.length > 0
        ? this.value.reportItems
        : [{ projectName: '', reportType: '', officialNo: '', officialTime: null, status: null, checkTime: null }],
      keys: ['projectName', 'reportType', 'officialNo', 'officialTime', 'status', 'checkTime']
    }
  },
  watch: {
    value(val) {
      this.data = val && val.reportItems && val.reportItems.length > 0 ? val.reportItems : [this.getEmptyRow()]
    }
  },
  methods: {
    handleChange() {
      const data = {
        ...this.value,
        reportItems: this.data.map(item => {
          if (item.officialTime) item.officialTime = formatDatetime(item.officialTime, 'YYYY-MM-DDTHH:mm:ss')
          if (item.checkTime) item.checkTime = formatDatetime(item.checkTime, 'YYYY-MM-DDTHH:mm:ss')
          return item
        })
      }
      this.$emit('input', data)
      this.$emit('change', data)
    }
  }
}
</script>
